<style>
    #isOuter{
        line-height: 37px;
    }
    #isOuter input[type=radio]{
        display: inline-block;
    }
</style>
<div class="layui-layout order-wrapper" style="padding:0 20px;">
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-inline">
                    <select name="app" class="app" lay-verify="">
                        <option value="-1">请选择公众号</option>
                    {{range $index, $elem := .app}}
                        <option value="{{$elem.Id}}">{{$elem.AppName}}</option>
                    {{end}}
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn search" data-type="reload">搜索</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal add">新增</button>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>
</div>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var laypage = layui.laypage;
        var $ = layui.$;
        //方法级渲染
        table.render({
            elem: '#table_list'
            ,url: '/menu/table'
            ,where: {appId:$('.app').val()}
            ,cols: [[
                {field:'Sort', title: '序号', align:'center',width:''},
                {field:'AppName', title: '应用名称', align:'center',width:''},
                {field:'Name', title: '菜单名称', align:'center',width:''},
                {field:'Path', title: '菜单路径', align:'center',width:''},
                {field:'IsOuter', title: '是否外链', align:'center',width:'',templet:function (d) {
                            if(d.IsOuter == 0){
                                return "否"
                            }else {
                                return "是"
                            }
                    }},
                {field:'SortId', title: '排序Id', align:'center',width:''},
                {field:'', title: '操作', align:'center',width:'',templet:function (d) {
                       return  `<button class="layui-btn layui-btn-xs" onclick="editMenu(`+d.Id+`,'`+d.AppName+`','`+d.Name+`','`+d.Path+`',`+d.IsOuter+`,`+d.SortId +`)">编辑</button>
                                <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="delMenu(`+d.Id+`)">删除</button>
                                <a href="/menu/second?id=` + d.Id + `&name=` + d.Name+ `&appName=` + d.AppName+ `&appId=` + d.AppId + `" class="layui-btn layui-btn-normal layui-btn-xs">查看二级菜单</a>`
                    }},
            ]]
            ,id: 'listReload'
            ,page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                ,hash: 'fenye' //自定义hash值
            }
            ,height: "full-200"
        });

        var active = {
            reload: function(){
                table.reload('listReload', {
                    where:{
                        appId:$('.app').val()
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };


        $('#search-wrapper .search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';

        });

        // $(".export").click(function(){
        //     var urlParam = "?page=1&limit=99999&startTime="+$('#start_time').val() + '&endTime=' + $('#end_time').val() + "&export=1";
        //     window.open('/operate/table'+urlParam)
        // });

        $(".add").click(function(){
            var appId = $(".app").val();
            var appName = $(".app option:selected").text();
            var isNone = $(".layui-none").length;
            if(appId == -1){
                layer.msg("请先选择公众号");
                return
            }
            layer.open({
                area: ['500px', 'auto'],
                content: `
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">公众号：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + appName + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称：</label>
                        <div class="layui-input-block">
                          <input type="text" placeholder="请输入菜单名称(必填)" class="layui-input menuName">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">菜单路径：</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入菜单路径" class="layui-input menuPath">
                        </div>
                      </div>
                       <div class="layui-form-item">
                        <label class="layui-form-label">是否外链：</label>
                        <div class="layui-input-block" id="isOuter">
                          <input type="radio" name="isOuter" value="1" /> 是
                          <input type="radio" name="isOuter" value="0" checked="checked" /> 否
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">排序Id：</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入排序Id(必填)" class="layui-input sortId">
                        </div>
                      </div>
                    </form>`,
                yes: function(index, layero){
                    //do something
                    var isOuter = $('input:radio[name="isOuter"]:checked').val();
                    var menuName = $(".menuName").val();
                    var sortId = $(".sortId").val();
                    var menuPath = $(".menuPath").val();
                    if(menuName == ''){
                        layer.msg("请输入菜单名称");
                        return
                    }
                    if(sortId == ''){
                        layer.msg("请输入排序id");
                        return
                    }
                    $.ajax({
                        type:'post',
                        url:'{{urlfor "MenuController.AddFirst"}}',
                        data:{appId:appId,isOuter:isOuter,menuName:menuName,sortId:sortId,menuPath:menuPath},
                        success:function (data) {
                            if(data.status == 0){
                                if(isNone == 1){
                                    active.reload();
                                }else{
                                    $(".layui-laypage-btn").click();
                                }
                                layer.msg(data.message);
                            }else{
                                layer.msg(data.message);
                            }
                        }
                    })
                    //layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            });
        });

    });

    function editMenu(id,appName,name,path,isOuter,sortId) {
        var str;
        if(isOuter == 1){
            str = `<div class="layui-input-block" id="isOuter">
                    <input type="radio" checked="checked" name="isOuter" value="1" /> 是
                    <input type="radio" name="isOuter" value="0" /> 否
                   </div>`;
        }else{
            str = `<div class="layui-input-block" id="isOuter">
                    <input type="radio" name="isOuter" value="1" /> 是
                    <input type="radio" checked="checked" name="isOuter" value="0" /> 否
                   </div>`;
        }
        layer.open({
            area: ['500px', 'auto'],
            content: `
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">公众号：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + appName + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称：</label>
                        <div class="layui-input-block">
                          <input type="text" placeholder="请输入菜单名称(必填)" class="layui-input menuName" value="`+name+`">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">菜单路径：</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入菜单路径" class="layui-input menuPath" value="`+path+`">
                        </div>
                      </div>
                       <div class="layui-form-item">
                        <label class="layui-form-label">是否外链：</label>
                        ` + str + `
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">排序Id：</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入排序Id(必填)" class="layui-input sortId" value="`+sortId+`">
                        </div>
                      </div>
                    </form>`,
            yes: function(index, layero){
                //do something
                var isOuter = $('input:radio[name="isOuter"]:checked').val();
                var menuName = $(".menuName").val();
                var sortId = $(".sortId").val();
                var menuPath = $(".menuPath").val();
                console.log(id,menuName,menuPath,sortId);
                if(menuName == ''){
                    layer.msg("请输入菜单名称");
                    return
                }
                if(sortId == ''){
                    layer.msg("请输入排序id");
                    return
                }
                $.ajax({
                    type:'post',
                    url:'{{urlfor "MenuController.EditFirst"}}',
                    data:{id:id,isOuter:isOuter,menuName:menuName,sortId:sortId,menuPath:menuPath},
                    success:function (data) {
                        if(data.status == 0){
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                        }else{
                            layer.msg(data.message);
                        }
                    }
                })
                //layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

    function delMenu(id) {
        layer.open({
            title:'提示',
            content: '确定要删除此一级菜单与其下面的所有的二级菜单吗？',
            yes: function(index, layero){
                //do something
                $.ajax({
                    type:'post',
                    url:'{{urlfor "MenuController.DelFirst"}}',
                    data:{id:id},
                    success:function (data) {
                        if(data.status == 0){
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                        }else {
                            layer.msg(data.message);
                        }
                    }
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }



</script>